<template>
  <div>
    <el-button type="primary" icon="el-icon-search" plain style="margin-bottom: 20px" @click="openAdd">选择模板</el-button>
    <el-card shadow="hover" :body-style="{ padding: '0px' }">
      <u-table
        :data="list2"
        :page="false"
        :columns="columns"
        :options="{ headerCellStyle: { background:'#FAFAFA'} }"
      >
      </u-table>
      <span class="numberV">{{ txtVal2 }}</span>
    </el-card>
    <!-- 选择模板 -->
    <u-dialog title="选择模板" :show.sync="dialogFormVisible" :append-to-body="true"  @confirm="hdlDel2()">
      <el-form ref="dialogForm" :model="dataForm" label-width="100px">
        <el-row>
          <el-form ref="dialogForm" :model="dataForm" label-width="100px">
            <u-filtered>
              <el-form :inline="true" :model="listQuery" class="search-form">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="listQuery.name" placeholder="请输入模板名称" clearable />
                </el-form-item>
                <el-form-item label="短信类型" prop="type">
                  <el-select v-model="listQuery.type" placeholder="请选择短信类型" class="status" clearable>
                    <el-option
                      v-for="item in type"
                      :key="item.value"
                      :label="item.name"
                      :value="item.type"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="创建人" prop="createdBy">
                  <el-input v-model="listQuery.createdBy" placeholder="请输入创建人" clearable style="width: 160px" maxlength="11" show-word-limit />
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="timestamp"
                    style="width:240px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="hdlFilter">查询</el-button>
                </el-form-item>
              </el-form>
            </u-filtered>
            <u-table
              :data="list"
              :loading="listLoading"
              :options="listOptions"
              :columns="columns"
              :pagination.sync="listQuery"
              :fetch="hdlList"
              @selection-change="hdlSelectChange2"
            />
          </el-form>
        </el-row>

      </el-form>

      <el-alert
        title="温馨提示"
        type="success"
        description="短信签名【成都群光】会在运营商处自动添加，无需填入短信内容，结尾‘，回T退’请填入。"
        show-icon
        :closable="false"
      />
    </u-dialog>

  </div>

</template>

<script>
/**
 * 业务组件 - 短信选择组件
 */
export default {
  name: 'Sms',
  props: {
    /** 选中的数据 */
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      api: this.$u.api.PlatformSmstemplate,
      dataForm: {
        name: '',
        type: '',
        content: '',
        telephone: '',
        number: 0,
        sendTime: 0,
        status: 0,
        transfer_credit: false
      },
      list: [],
      list2: [],
      dialogFormVisible: false,
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listOptions2: {
        mutiSelect: false,
        stripe: true
      },
      columns: [
        {
          prop: 'name',
          label: '模板名称'
        },
        {
          prop: 'type',
          label: '短信类型'
        },
        {
          prop: 'content',
          label: '短信内容'
        },
        {
          prop: 'createdBy',
          label: '创建人'
        },
        {
          prop: 'createdAt',
          label: '创建日期',
          sortable: true,
          timestamp: true
        }
      ],
      txtVal2: ' ',
      activeName: 'muban',
      type: [{
        type: '营销',
        value: 'yx',
        name: '营销'
      }, {
        type: '通知',
        value: 'tz',
        name: '通知'
      }],
      dataAddRules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: ['blur'] }
        ],
        type: [
          { required: true, message: '请选择短信类型', trigger: ['blur'] }
        ],
        content: [
          { required: true, message: '请输入短信内容', trigger: ['blur'] }
        ]
      },
      txtVal3: '签名 6,内容 0,计费1条',
      searchDate: [],
      selectData2: []

    }
  },
  watch: {
    // 监听数据
    value: {
      immediate: true,
      handler(val) {
        // 初始化数据
        this.loadData(val)
      }
    }
  },
  methods: {
    hdlDel2() {
      // 检查选中数据源
      if (this.selectData2.length !== 1) {
        this.$u.toast('请选择1条模板', 'error')
        return false
      }
      this.list2 = this.selectData2
      this.$emit('change', this.list2[0].id)
      this.dialogFormVisible = false
    },
    descChange(val) {
      const len = val.length
      if ((parseInt(len) + 6) <= 70) {
        this.txtVal2 = '计费1条'
      } else if ((parseInt(len) + 6) > 70 && (parseInt(len) + 6) <= (70 + 67)) {
        this.txtVal2 = '计费2条'
      } else if ((parseInt(len) + 6) > (70 + 67) && (parseInt(len) + 6) <= (70 + 67 + 67)) {
        this.txtVal2 = '计费3条'
      } else {
        this.txtVal2 = '未知'
      }
    },
    openAdd() {
      const self = this
      // 初始化数据源
      self.dataForm = {
        transfer_credit: false
      }
      // 打开弹框状态
      self.dialogFormVisible = true
    },
    // 初始化数据
    async loadData(val) {
      this.list2 = []
      if (val) {
        const res = await this.api.fetch(val)
        const { data } = res
        if (data) {
          this.list2.push(data)
        } else {
          this.list2 = []
        }
      }
    },
    // 通知数据更新
    change() {
      const { value } = this
      this.$emit('change', value)
    },
    hdlSelectChange2(val) {
      this.selectData2 = val
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-input{
    width: 100% !important;
  }
}
</style>
